---
title: "k"
description: "The k API allows you to use utility style props directly on a React component. These elements accept utility props for inline styling that are type-safe and intuitively named. This enables you to apply styles directly on the components while maintaining code readability and ease of use."
---

import { ThisIsTheKDiv, ExampleContainer } from "../../../components/example";

# k

The `k` API allows you to use utility style props directly on a React component. These elements accept utility props for inline styling that are type-safe and intuitively named. This means you can apply styles directly on the components while maintaining code readability and ease of use.

`<k.div />` under the hood is converted into `<Box as="div" />
`. The difference between when to use `Box` and when to use `k` is that the variant applied
to the Box component in `kuma.config.ts` does not apply when using k. In other words,
users can use the Style Props provided by Kuma for a plain HTML element without any
pre-attached styles.

## Import

```tsx copy
import { k } from "@kuma-ui/core";
```

## Usage

<ExampleContainer>
  <ThisIsTheKDiv />
</ExampleContainer>

```tsx copy
const ThisIsTheKDiv = () => {
  return (
    <k.div p={4} m={["2px", "4px"]} _hover={{ color: "blue" }}>
      Hello world
    </k.div>
  );
};
```

In this example, we used the `k.div` component and styled it using utility props. The `p` and `m` props correspond to padding and margin, respectively. Note how we can provide an array to the `m` prop for responsive margin values, a feature we'll explore in detail in a later section.
